/* eslint-disable */
<template>
  <div class="list-model">
    <div class="table-box">
      <el-table
        :data="list"
        size="mini"
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column
          label="#"
          type="index"
        ></el-table-column>
        <el-table-column
          prop="orderType"
          label="参数名称"
          min-width="90"
        >
          <template slot-scope="scope">
            <span>{{scope.row.orderType===1?'模型订单':'任务订单'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="userName"
          label="参数值"
        ></el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            <div>{{scope.row.startTime||'--'}}</div>
            <div>至{{scope.row.endTime||'--'}}</div>
          </template>
        </el-table-column>
        <el-table-column label="更新时间">
          <template slot-scope="scope">
            <div>{{scope.row.startTime||'--'}}</div>
            <div>至{{scope.row.endTime||'--'}}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="100"
        >
          <template slot-scope="scope">
            <el-tooltip
              v-auth="['resource:file:update']"
              :content="$t('Edit')"
              placement="top"
            >
              <span><el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-edit-outline"
                  @click="_edit(scope.row)"
                  circle
                ></el-button></span>
            </el-tooltip>
            <el-tooltip
              v-auth="['resource:file:delete']"
              :content="$t('Delete')"
              placement="top"
            >
              <el-popconfirm
                :confirmButtonText="$t('Confirm')"
                :cancelButtonText="$t('Cancel')"
                icon="el-icon-info"
                iconColor="red"
                :title="$t('Delete?')"
                @onConfirm="_delete(scope.row,scope.row.id)"
              >
                <el-button
                  type="danger"
                  size="mini"
                  icon="el-icon-delete"
                  circle
                  slot="reference"
                ></el-button>
              </el-popconfirm>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <mCreate ref="mCreate"></mCreate>
  </div>
</template>
<script>
  import mCreate from './create.vue'
  import { mapActions } from 'vuex'
  export default {
    name: 'tenement-list',
    data () {
      return {
        loading: false,
        list: [],
      }
    },
    props: {
      tenementList: Array,
      pageNo: Number,
      pageSize: Number
    },
    methods: {
      ...mapActions('security', ['deleteQueue']),
      /* time是秒 */
      getFormatTime (time) {
        if (!time) {
          return '<span class="m-orange">0</span>天<span class="m-orange">0</span>时<span class="m-orange">0</span>分<span class="m-orange">0</span>秒'
        }
        if (time === 0) {
          return '<span class="m-orange">0</span>天<span class="m-orange">0</span>时<span class="m-orange">0</span>分<span class="m-orange">0</span>秒'
        }
        if (typeof time === 'string') {
          // 判断传入的是不是string类型，如果是的话，先转换成时间number类型
          time = Number(time)
        }
        let oneDay = 60 * 60 * 24
        let oneHour = 60 * 60
        let oneMinute = 60
        let oneSecond = 1
        let days = 0
        let hours = 0
        let minutes = 0
        let seconds = 0
        if (time >= oneDay) {
          days = Math.floor(time / oneDay)
          hours = Math.floor((time % oneDay) / oneHour)
          minutes = Math.floor((time % oneHour) / oneMinute)
        } else if (oneHour <= time && time < oneDay) {
          hours = Math.floor(time / oneHour)
          minutes = Math.floor((time % oneHour) / oneMinute)
          seconds = Math.floor(((time % oneHour) % oneMinute) / oneSecond)
        } else if (time >= oneMinute && time < oneHour) {
          minutes = Math.floor(time / oneMinute)
          seconds = Math.floor((time - minutes * oneMinute) / oneSecond)
        } else if (time >= oneSecond && time < oneMinute) {
          seconds = Math.floor(time / oneSecond)
        }
        time = `<span class="m-orange">${days}</span>天<span class="m-orange">${hours}</span>时<span class="m-orange">${minutes}</span>分<span class="m-orange">${seconds}</span>秒`
        return time
      },
      _edit (item, i) {
        this.$refs.mCreate.show(item)
      },
      _delete (item, i) {
        this.deleteQueue({
          id: item.id
        })
          .then((res) => {
            this.$emit('on-update')
            this.$message.success(res.msg)
          })
          .catch((e) => {
            this.$message.error(e.msg || '')
          })
      },
      _detail (item) {
        // todo
      }
    },
    watch: {
      tenementList (a) {
        this.loading = true
        this.list = []
        setTimeout(() => {
          this.list = a
          this.loading = false
        }, 200)
      }
    },
    created () {
      this.list = this.tenementList
    },
    mounted () { },
    components: { mCreate }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
.m-orange {
  color: #f2771e;
}
.cli {
  // margin-left: 12px;
  font-size: 14px;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  text-align: LEFT;
  color: #33317e;
  line-height: 20px;
  cursor: pointer;
}
.otherCli {
  width: 10px;
  margin-left: 12px;
  font-size: 14px;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  text-align: LEFT;
  color: #33317e;
  // background: #fff;
  line-height: 20px;
  border: 0;
  cursor: pointer;
}
</style>
